<template>
    <div class="articles">


<!--        文章列表-->
        <ArticleList :articleList="articleList"></ArticleList>

        <!--    分页插件-->
        <div  class="block" style="text-align: center; margin-top: 20px">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageNum"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </div>

</template>

<script>
    import https from "../../../https";
    // 导入
    import ArticleList from '../../components/articleList'

    export default {
        name: "articles",
        data() {
            return {
                articleList: [],
                pageNum:1,    //当前页
                pageSize:10,   //每页条数
                pages:0, //总页数
                total: 0,     //总数据
            }
        },
        mounted: function () {
            this.getArticleList()
        },
        methods: {
            /**
             * 获取文章列表数据
             */
            getArticleList() {

                https.fetchGet('/article/list/'+ this.pageNum + '/' + this.pageSize).then((res) => {


                    if (res.data.code == 200) {

                        const {data} = res.data
                        console.log(data)
                        // 更新数据
                        this.articleList = data.records //数据
                        this.pageNum = parseInt(data.current) //当前页
                        this.pageSize = parseInt(data.size)    //每页条数
                        this.pages = parseInt(data.pages)    //总页数
                        this.total = parseInt(data.total)   //总条数
                    }
                }).catch((err) => {
                    console.log(err);
                })

            },

            /**
             * 跳转到文章详情页
             * @param articleId
             */
            toArticleDetail(articleId){
                console.log(articleId)
                this.$router.push({
                    path: `/articles/articleDetail/${articleId}`
                })
            },

            /**
             * 触发其他页
             * @param val
             */
            handleCurrentChange(val) {
                this.pageNum = val
                this.getArticleList();
            },
        },
        components:{ArticleList}
    }
</script>

<style scoped>

    .title{
        color: #333;
        margin: 7px 0 4px;
        display: inherit;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5;
    }

    .box-card {
        margin: 10px auto;
    }

    .abstract {
        min-height: 30px;
        margin: 0 0 8px;
        font-size: 13px;
        line-height: 24px;
        color: #555;
    }
    .meta{
        padding-right: 0!important;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
    }
    span{
        margin-right: 10px;
        color: #666;
    }
</style>
